<script setup>
    import {
        ref,
        onMounted, watch
    } from 'vue';

    //响应数据必须用ref修饰 , 被监听的数据
    const messageList = ref()
    let queryObj = {
        pageSize: 5,
        pageNum: 1
    }

    //初始化数据onMounted钩子函数
    onMounted(() => {
        queryData()
    })

    function queryData() {
        fetch('http://localhost:8080/message/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: JSON.stringify(queryObj)
        }).then(response => {
            return response.json()
        }).then(data => {
            console.log(data)
            if (data.code == 200) {
                messageList.value = data.data.list
            } else {
                alert(data.message)
            }
        })
    }

    const msg = ref({
        author: '',
        message: ''
    })
    let handleSubmit = () => {
        checkAuthor(msg.value.author)
        if(error.value != '')
            return ;
        fetch('http://localhost:8080/message/insert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: JSON.stringify(msg.value)
        }).then(response => {
            return response.json()
        }).then(data => {
            if (data.code == 200) {
                msg.value.author = ''
                msg.value.message = ''
                queryData()
            }
        })
    }

    let search = ref({
        author: '',
        message: ''
    })
    let handleSearch = () => {
        if (search.value.author != '') {
            queryObj = {
                ...queryObj,
                author: search.value.author
            }
        } else {
            delete queryObj.author;
        }
        if (search.value.message != '') {
            queryObj = {
                ...queryObj,
                message: search.value.message
            }
        } else {
            delete queryObj.message;
        }
        queryData()
    }

    //
    const error = ref();
    watch(() => msg.value.author, (New, Old) => {
        checkAuthor(New)
    }, {deep: true})

    const checkAuthor = (str) => {
        const reg = /^\w{4,10}$/
        if (!reg.test(str))
            error.value = "用户名格式错误"
        else error.value = ''
    }
</script>

<template>
    <router-view></router-view>
    <div id="container">
        <div>
            <h3>留言板</h3>
        </div>
        <div>
            用户：<input type="text" v-model="search.author"> 留言：<input type="text" v-model="search.message"> <input
                id="search"
                type="button" value="搜索" @click="handleSearch">
            <div v-for="msg in messageList" :key="msg.id" class="article">
                <div class="author">用户:{{ msg.author }}<span>{{ msg.id }}#</span></div>
                <div class="content">{{ msg.message }}</div>
                <div class="time page">发表于:{{ msg.createDate }}</div>
            </div>
        </div>
        <div class="page">
            <span id="prePage">上一页</span> <span id="nextPage">下一页</span>
        </div>
        <br>
        <div>
            <form id="myForm">
                <div>
                    用户: <input type="text" v-model="msg.author"/><span style="color: red">{{ error }}</span>
                </div>
                <br>
                <div>
                    留言: <textarea v-model="msg.message" rows="5" cols="72"></textarea>
                </div>
                <div style="text-align: center;"><input type="reset" value="清除"/> <input id="submit" type="button"
                                                                                         value="发表"
                                                                                         @click="handleSubmit"/></div>
            </form>
        </div>
    </div>
</template>

<style scoped>
    div {
        margin: 0;
        padding: 0;
        font-size: 12px;
        margin: 0 auto;
    }

    h3 {
        text-align: center
    }

    #container {
        width: 500px;
    }

    .article {
        border: 1px solid #a6cbe7;
        margin-top: 5px;
    }

    .author {
        background-color: #0099FF;
        width: 100%;
        height: 24px;
        line-height: 24px;
    }

    .content {
        height: 40px;
        padding: 10px;
    }

    .author span {
        float: right;
        padding-right: 10px;
    }

    .time {
        border-top: solid 1px #a6cbe7;
    }

    .page {
        text-align: right;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
    }
</style>


